<template>
  <div>
    <a-row :gutter="10">
      <a-col :span="left">
        <a-card size="small">
          <div slot="title" class="flx-b">
            <div class="flx-s">
              <div><a @click="tab=1">流程名称</a></div>
              <div class="version flx-c">1.0</div>
            </div>
            <ZgSwitch v-model="isPublish" :width="75" :text="['已发布','未发布']"></ZgSwitch>
          </div>
          <div class="container scroll" :style="{height:`${winHeight-200}px`}">
            <div v-for="(node,i) in nodeList" :key="`node${i}`">
              <StartNode v-if="node.type===8" @addNode="onAddNode($event,i)"></StartNode>
              <EndNode v-if="node.type===9" @addNode="onAddNode($event,i)"></EndNode>
              <SimpleNode
                :type="node.type"
                v-if="[1,2,6,7].includes(node.type)"
                @addNode="onAddNode($event,i)"
                @toSetNode="toSetNode"
                @removeNode="onRemoveNode($event,i)"></SimpleNode>
              <GatewayNode
                :type="node.type"
                v-if="[3,4,5].includes(node.type)"
                @addNode="onAddNode($event,i)"
                @toSetNode="toSetNode"
                @removeNode="onRemoveNode($event,i)"></GatewayNode>
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :span="24-left">
        <a-card size="small">
          <a-tabs type="card" v-model="tab">
            <a-tab-pane :key="1" tab="设置流程信息">
            </a-tab-pane>
            <a-tab-pane :key="2" tab="设置节点信息">
            </a-tab-pane>
          </a-tabs>
          <div class="scroll" :style="{margin:`-10px`,padding:`10px`,height:`${winHeight-220}px`}">
            <div v-if="tab===1">
              <FlowInfo></FlowInfo>
            </div>
            <div v-if="tab===2">
              <ZgEmpty v-if="nodeInfo===null" :extraHeight="300" description="请选择节点"></ZgEmpty>
              <a-collapse v-else accordion :bordered="false" v-model="activeKey">
                <a-collapse-panel key="1" header="节点信息" :style="customStyle">
                  <NodeInfo></NodeInfo>
                </a-collapse-panel>
                <a-collapse-panel v-if="nodeInfo.type===1" key="2" header="选人模式" :style="customStyle">
                  <NodeUserSelMode></NodeUserSelMode>
                </a-collapse-panel>
                <a-collapse-panel v-if="nodeInfo.hasCondition" key="3" header="流转条件" :style="customStyle">
                  <NodeCondition></NodeCondition>
                </a-collapse-panel>
                <a-collapse-panel v-if="nodeInfo.type===2" key="4" header="处理脚本" :style="customStyle">
                  <NodeScript></NodeScript>
                </a-collapse-panel>
                <a-collapse-panel v-if="nodeInfo.type===6" key="5" header="自动退回" :style="customStyle">
                  <NodeAutoBack></NodeAutoBack>
                </a-collapse-panel>
                <a-collapse-panel v-if="nodeInfo.type===1" key="6" header="表单视图" :style="customStyle">
                  <NodeFormView></NodeFormView>
                </a-collapse-panel>
              </a-collapse>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import StartNode from './node/StartNode'
import EndNode from './node/EndNode'
import SimpleNode from './node/SimpleNode'
import GatewayNode from './node/GatewayNode'
import FlowInfo from './config/FlowInfo'
import NodeInfo from './config/NodeInfo'
import NodeUserSelMode from './config/NodeUserSelMode'
import NodeCondition from './config/NodeCondition'
import NodeScript from './config/NodeScript'
import NodeAutoBack from './config/NodeAutoBack'
import NodeFormView from './config/NodeFormView'
export default {
  components: {
    StartNode,
    EndNode,
    SimpleNode,
    GatewayNode,
    FlowInfo,
    NodeInfo,
    NodeUserSelMode,
    NodeCondition,
    NodeScript,
    NodeAutoBack,
    NodeFormView
  },
  data () {
    return {
      tab: 1,
      activeKey: '1',
      left: 16,
      isPublish: true,
      nodeList: [
        { type: 8, children: [] },
        { type: 1, children: [] },
        { type: 9, children: [] }
      ],
      nodeInfo: null,
      customStyle: 'background:#fff;'
    }
  },
  mounted () {
  },
  methods: {
    onAddNode (event, i) {
      this.nodeList.splice(i + 1, 0, {
        type: event.key,
        children: []
      })
    },
    onRemoveNode (event, i) {
      const that = this
      that.$confirm({ title: '确定删除这个节点么',
        onOk () {
          that.nodeList.splice(i, 1)
        }
      })
    },
    toSetNode (param) {
      this.tab = 2
      this.nodeInfo = param
    }
  }
}
</script>
<style lang="less" scoped>
  .version{
    padding:0 15px;
    height:16px;
    border-radius:8px;
    background:#f2f2f2;
    color:#333;
    font-size:10px;
    margin-left:10px;
  }
  .container{
    margin:-10px;
    background:#fff;
    padding:30px;
  }
</style>
